<template>
	
	<div class="class_time_total_container">
		<div class="title" >
			<span v-if="isDetail">
				<span style="cursor: pointer;" @click="back">课时统计</span>
				<span>></span>
				<span style="cursor: pointer;">详情</span>
			</span>
			<!-- <span style="cursor: pointer;" @click="back" v-else>
				课时统计
			</span> -->
			
		</div>
		<div class="class_time_total_detail" v-if="isDetail">
			<div class="header">
				<div class="top">
					<span class="name">{{curRowData.teacherName}}</span>
					<span class="phone">{{curRowData.phone}}</span>				
				</div>
				<div class="detail_info">
				<el-row style="height:0.5rem;">
					<el-col :span="8"><span class="spanlabel">课时统计区间：</span><span class="spanlabelweight">{{curRowData.startDate}}-{{curRowData.endDate}}</span></el-col>
					<el-col :span="8"><span class="spanlabel">授课班数：</span><span class="spanlabelweight">{{curRowData.teachingClassCount}}</span></el-col>
					<el-col :span="8"><span class="spanlabel">上课次数：</span><span class="spanlabelweight">{{curRowData.teachingLessonCount}}</span></el-col>
				</el-row>
				<el-row style="height:0.5rem;">
					<el-col :span="8"><span class="spanlabel">课消时长(小时)：</span><span class="spanlabelweight">{{curRowData.totalConsumeTimeCount}}</span></el-col>
					<el-col :span="8"><span  class="spanlabel">课消人次：</span><span class="spanlabelweight">{{curRowData.totalConsumeStudentCount}}</span></el-col>
					<el-col :span="8"></el-col>
				</el-row>
			</div>
		    </div>
		    <div class="bodyer">
			    <div class="search_info">
			    	<el-row>
			    		<el-select style="width:2rem;" @change="changeClassDetail" filterable clearable v-model="curRowData.classtxt" placeholder="按班级">
						    <el-option
						      v-for="item in searchparams.classlist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
	  					</el-select>
	  					<!--<el-select style="width:2rem;" filterable clearable v-model="searchdeatailparams.class_type" placeholder="按课程类别">
						    <el-option
						      v-for="item in searchparams.classtypelist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
	  					</el-select>-->
			    	</el-row>
			    </div>
			    <div class="teacher_list">
		    		<div class="tablecss">
	              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
			      			<thead>
			      				<tr >
			      					<th>序号</th>
			      					<th>班级名</th>
			      					<th>课程类型</th>
			      					<th>课节时间</th>	
			      					<th>课消时长</th>				      				
			      					<th>课消人次</th>	
			      					<th>到课人次</th>	
			      					<th>请假人次</th>	
			      					<th>缺勤人次</th>				      					
			      				</tr>				      				
			      			</thead>
			      			<tbody  v-if="teacherclslist.length>0">
			      				<tr v-for="li,index in teacherclslist">
			      					<td align="center">{{index+1}}</td>
			      					<td align="center">{{li.className}}</td>			      					
			      					<td align="center">
			      						{{courseType(li.courseType)}}
			      					</td>			      					
			      					<td align="center">{{li.teachingTime}}</td>
			      					<td align="center">{{li.consumeTimeCount}}</td>
			      					<td align="center">{{li.consumeStudentCount}}</td>
			      					<td align="center">{{li.attendingClassOfStudentCount}}</td>
			      					<td align="center">{{li.leavingOfStudentCount}}</td>
			      					<td align="center">{{li.absenteeismOfStudentCount}}</td>
			      				</tr>	      				
			      			</tbody>
			      			<tbody  v-else >
				      				<tr>
				      					<td colspan="11" align="center">暂无数据</td>
				      				</tr>
				      			</tbody>
		      		    </table>
			      	</div>
		    	</div>
		    	<div class="bottomPager">
		    		<el-pagination	 
			    	  class="page"
				      @current-change="DetailcurChange"
				      @size-change="DetailpageSizeChange"
				      :page-size="pagerDetail.pagesize"	
				      :current-page="pagerDetail.currpage"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="pagerDetail.totalnum">
		    		</el-pagination>
		    	</div>
			</div>
		</div>
		<div class="class_time_total" v-else>
			<div class="top">
				<el-row>
					<el-col :span="21">
						<el-date-picker
							  style="width:3rem;float: left;margin-right: 0.1rem;"
							  @change="changeDate"
						      v-model="searchparams.period"
						      type="daterange"
						      value-format="yyyy-MM-dd"
						      range-separator="-"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期">
	    				</el-date-picker>				
						<el-select style="width:2rem;float: left;margin-right: 0.1rem;" @change="changeClass" filterable clearable v-model="searchparams.classtxt" placeholder="按班级">
						    <el-option
						      v-for="item in searchparams.classlist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
	  					</el-select>
	  					<el-select style="width:2rem;float: left;margin-right: 0.1rem;" @change="changeCourseType" filterable clearable v-model="searchparams.lessontype" placeholder="按课程类别">
						    <el-option
						      v-for="item in searchparams.classtypelist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
	  					</el-select>
	  					<el-select style="width:2rem;float: left;margin-right: 0.1rem;" @change="changeTeacher" filterable clearable v-model="searchparams.teachertxt" placeholder="按教师">
						    <el-option
						      v-for="item in searchparams.teacherlist"
						      :key="item.value"
						      :label="item.name"
						      :value="item.value">
						    </el-option>
	  					</el-select>
	  					&emsp;
	  					<div class="search_btn" @click="search()" v-if="hasApi('classHourReportList')" >搜索</div>
	  					<!--<el-input style="width:2rem;float: left;margin-right: 0.1rem;" v-model="searchparams.searchtxt" placeholder="请输入内容"></el-input>
						<div class="search_btn" @click="search">搜索</div>-->
					</el-col>			
					<el-col :span="3">
						<div class="exportbtn" v-if="exportstate && hasApi('classHourReportExport')"  @click="exportexcel">批量导出</div>
						<div class="exportbtn" v-else-if="hasApi('classHourReportExport')"  style="cursor: not-allowed;">批量导出</div>
					</el-col>
				</el-row>
			</div>
			<div class="content">
				<el-row style="margin-top:0.1rem;">
					<div class="list">
						<div class="tablecss">
		              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead style="border-top:1px solid #F0F0F0;">
				      				<tr >
				      					<th>序号</th>
				      					<th>姓名</th>
				      					<th>手机号</th>
				      					<th>课程类别</th>
				      					<th>授课班数</th>	
				      					<th>上课次数</th>	
				      					<th>课消时长(小时)</th>	
				      					<th>课消人次</th>	
				      					<th>到课人次</th>	
				      					<th>请假人次</th>	
				      					<th>缺勤人次</th>	
				      					<th>操作</th>	
				      				</tr>				      				
				      			</thead>
				      			<tbody  v-if="datalist.length>0">
				      				<tr v-for="li,index in datalist">
				      					<td align="center">{{index+1}}</td>
				      					<td align="center">{{li.teacherName}}</td>
				      					<td align="center">{{li.phone}}</td>
				      					<td align="center">{{courseType(li.courseType)}}</td>
				      					<td align="center">{{li.teachingClassCount}}</td>			      					
				      					<td align="center">{{li.teachingLessonCount}}</td>
				      					<td align="center">{{li.totalConsumeTimeCount}}</td>
				      					<td align="center">{{li.totalConsumeStudentCount}}</td>
				      					<td align="center">{{li.totalAttendingClassOfStudentCount	}}</td>
				      					<td align="center">{{li.totalLeavingOfStudentCount}}</td>
				      					<td align="center">{{li.totalAbsenteeismOfStudentCount}}</td>
				      					<td align="center"><a href="javascript:void(0);" @click="detail(li)" v-if="hasApi('classHourReportDetail')">详情</a></td>			      					
				      				</tr>	      				
				      			</tbody>
				      			<tbody  v-else >
					      				<tr>
					      					<td colspan="11" align="center">暂无数据</td>
					      				</tr>
					      			</tbody>
			      		    </table>
				      	</div>
					</div>
				</el-row>
			</div>
			<div class="bottomPager">
		    		<el-pagination	 
			    	  class="page"
				      @current-change="ClassTimecurChange"
				      @size-change="ClassTimepageSizeChange"
				      :page-size="pagerClassTime.pagesize"	
				      :current-page="pagerClassTime.currpage"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="pagerClassTime.totalnum">
		    		</el-pagination>
		    </div>
		</div>
		
	</div>
	
	
</template>

<script>
	let vm;
	export default{
		data(){
			return {
				isDetail:false,
				curRowData:null,
				pagerClassTime:{
					totalnum:0,
					pagesize:10,
					currpage:1,

				},
				pagerDetail:{
					totalnum:0,
					pagesize:10,
					currpage:1,
				},
				searchparams:{
					period:'',//时间段
					classtxt:'',//按班级
					lessontype:'',//班级类别
					teachertxt:'',//老师
					searchtxt:'',//搜索关键字	
					classlist:[],//班级列表
					classtypelist:[],//班级类别列表
					teacherlist:[]//教师列表					
				},
				searchdeatailparams:{
					teacher_class:'',//班级
					class_type:'',//班级类别
				},
				datalist:[],
				teacherclslist:[],
				tableData: [
				        {'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "小明"},
				        {'index':'1',"nickName": "女人天生高贵", "name": "小红"},
				        {'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"}
      			],      			
      			exportstate:true,//导出excel按钮状态 true为正在下载
				exportNotification:null//导出excel状态通知
			}
		},
		methods:{
			/**
			 * 初始化数据
			 */
			init(){
				//debugger
				let dicdata = tool.getItem(lsKey.dict,true)
				vm.searchparams.classtypelist = dicdata['course_type'];
				let campusId=this.$store.state.campusId;     
			      //班级初始化
			    api.getclassalllist({campusId:campusId}).then(function(d){			      
			        if(d.result=='操作成功'){
			          let classlist=d.list;
			          vm.searchparams.classlist=classlist.map(function(row){
			            return {name:row.className,value:row.classId}
			          });
			        }
			    });
			    
			     //教师初始化
		        api.userListByCampus({campusId:campusId}).then(function(d){		        
			        if(d.result=='处理成功'){
			          let teacherlist=d.userList;
			          vm.searchparams.teacherlist=teacherlist.map(function(row){
			            return {name:row.nickName,value:row.userId}
			          });
			         }
		        });
		        vm.search();
			},
			  //校区改变
			campusChange (campusId) {
			  vm.pagerClassTime.currpage = 1;
			  vm.init();
				
			},
			/**
			 * 搜索
			 */
			search(){
				vm.searchparams.period = vm.searchparams.period||"";
				let startTime = vm.searchparams.period[0]||'';
				let endTime = vm.searchparams.period[1]||'';
				let param ={
					campusId:vm.$store.state.campusId,
					pageSize:vm.pagerClassTime.pagesize,
					currPage:vm.pagerClassTime.currpage,
					startTime:startTime,
					endTime:endTime,
					teacherUserId:vm.searchparams.teachertxt,
					classId:vm.searchparams.classtxt,
					courseType:vm.searchparams.lessontype
				}
				api.classHourReportList(param).then(function(data){
					
					if(data.result=="操作成功"){
						vm.pagerClassTime.totalnum = data.totalCount;
						vm.datalist=[];
						vm.datalist = data.list;
					}
				})
			},
			/**
			 * 导出
			 */
			exportexcel(){
				vm.searchparams.period = vm.searchparams.period||"";
				let startTime = vm.searchparams.period[0]||'';
				let endTime = vm.searchparams.period[1]||'';
				let param = {
					campusId:vm.$store.state.campusId,					
					startTime:startTime,
					endTime:endTime,					
					classId:vm.searchparams.classtxt,
					courseType:vm.searchparams.lessontype,
					teacherUserId:vm.searchparams.teachertxt
				}
				let config = { responseType: 'blob'};
				vm.exportstate = false;
				vm.exportNotification = vm.$notify({
			          title: '课时统计导出处理中...',
	          		  message: '请稍候，无须重复操作',		         
			          iconClass:"el-icon-loading",			         
			          duration: 0,
			          showClose: false
        		});
				api.classHourReportExport(param,config).then(function(data){
					
					let blob = new Blob([data.data], {type: "application/vnd.ms-excel"});					
					let filename = decodeURI(data.headers['content-disposition'].split(';')[1].split('=')[1]);
					let downloadElement = document.createElement('a'); 
					var href = window.URL.createObjectURL(blob); 
					//创建下载的链接 
					downloadElement.href = href; 
					downloadElement.download = filename; 
					//下载后文件名 
					document.body.appendChild(downloadElement);
					downloadElement.click(); 
					//点击下载 
					document.body.removeChild(downloadElement); 
					//下载完成移除元素
					window.URL.revokeObjectURL(href);
					
					vm.exportstate = true;
					vm.exportNotification.close();
					
					vm.exportNotification = vm.$notify({			         
			          type:'success',
			          title: '课时统计导出成功',
		          	  message: '请保存至本地',
			          duration: 4000,
			          showClose: false
        			});
					//释放掉blob对象 
					return data.data
				}).catch(function(e){
					vm.exportstate = true;
					vm.exportNotification.close();
					vm.exportNotification = vm.$notify({
			          title: '',
			          type:'error',
			          message: '请求数据失败...',
			          duration: 2000,
			          showClose: false
        			});
				})
				
//				const tHeader = ['序号', '昵称', '姓名'];	        
//	        	const filterVal = ['index', 'nickName', 'name'];	        
//	        	const list = this.tableData;  //把data里的tableData存到list
//				tool.exportexcel(tHeader,filterVal,list,"exceldemo");

			},
			
			/**
			 * 详情搜索
			 */
			detailsearch(){
				let param ={
					campusId:vm.$store.state.campusId,
					teacherUserId:vm.curRowData.teacherUserId,
					pageSize:vm.pagerDetail.pagesize,
					currPage:vm.pagerDetail.currpage,
					startTime:vm.curRowData.startDate,
					endTime:vm.curRowData.endDate,					
					classId:vm.curRowData.classtxt,
					courseType:vm.curRowData.courseType
				}
				api.classHourReportDetail(param).then(function(data){
					
					if(data.result=="操作成功"){
						vm.pagerDetail.totalnum = data.totalCount;
						vm.teacherclslist=[];
						vm.teacherclslist = data.list;
					}
				})
			},
			/**
			 * 详情
			 */
			detail(li){
				
				vm.isDetail = true;
				vm.curRowData = li;	
				vm.searchparams.period = vm.searchparams.period||"";
				vm.curRowData.startDate = vm.searchparams.period[0]||"";
				vm.curRowData.endDate = vm.searchparams.period[1]||"";
				vm.curRowData.classtxt = vm.searchparams.classtxt||"";
			    vm.detailsearch();
			},
			/**
			 * 返回课时统计列表
			 */
			back(){
				vm.isDetail = false;
			},
			/**
			 * 课时统计当前页
			 */
			ClassTimecurChange(val){
				vm.pagerClassTime.currpage = val;
				vm.search();
			},
			/**
			 * 课时统计页码发生变化
			 */
			ClassTimepageSizeChange(val){
				vm.pagerClassTime.pagesize=val;
				vm.search();
			},
			/**
			 * 改变日期
			 */
			changeDate(val){
				vm.pagerClassTime.currpage = 1;
				vm.searchparams.period = val||"";
			},
			/**
			 * 改变班级
			 */
			changeClass(val){
				vm.pagerClassTime.currpage = 1;
				vm.searchparams.classtxt = val;
					
			},
			/**
			 * 改变班级类型
			 */
			changeCourseType(val){
				
				vm.searchparams.lessontype = val;
			},
			/**
			 * 改变教师
			 */
			changeTeacher(val){
				vm.pagerClassTime.currpage = 1;
				vm.searchparams.teachertxt = val;
				
				
			},
			/**
			 * 详情统计当前页
			 */
			DetailcurChange(val){
				
				vm.pagerDetail.currpage = val;
				vm.detailsearch();
			
			},
			/**
			 * 详情页码发生变化
			 */
			DetailpageSizeChange(val){
				
				vm.pagerDetail.pagesize = val;
				vm.detailsearch();				
			},
			/**
			 * 改变详情班级
			 */
			changeClassDetail(val){
				vm.curRowData.classtxt = val;
				vm.detailsearch();
			},
			/**
			 * 获取班级类型
			 */
			courseType(type){
				
				switch(type){
					
					case 1:{
						return "一对一";
						break;
					}
					case 2:{
						return "班课(全日/半日)";
						break;
					}
					case 3:{
						return "课时";
						break;
					}
					case 4:{
						return "双师";
						break;
					}
					case 5:{
						return "在线";
						break;
					}
				}
				
				return "类型";
			}
			
		},
		mounted(){
		   vm = this;
		   vm.init();
		}
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.class_time_total_container{
		.title{
			margin: 0rem auto;
		    min-width: 15.48rem;
		    width: 15.48rem;
		    font-size: 0.26rem;
		    color: #141414;
		    text-shadow: 0.01rem 0 0 currentcolor;
		    line-height: 0.6rem;
		}
		.class_time_total{
			margin: 0.14rem auto;
		    min-width: 15.48rem;
		    width: 15.48rem;
		    padding: 0.2rem 0.32rem 0.2rem 0.32rem;
		    height: auto;
		    background: #fff;
		    border: 0.01rem solid #ededed;
		    border-radius: 0.1rem;
		    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
		  
		    .el-input__inner{
		        border-radius: 0.08rem;
		        font-size: 0.16rem;
		        color: #666666;
		        height: 0.36rem !important;
		        line-height: 0.36rem;
    		}
    		.searchbtn{
    			height: 0.36rem;
    			width:1rem;  
    			float: left;	
    			line-height: 0.36rem;			
    			text-align: center;
    			font-size: 0.16rem;	
    			background: #3885F8;
	            color: #FFFFFF;
	            border-radius: 0.1rem;		
	            cursor: pointer;
	            &:hover{
            		background: rgba(56, 133, 248, 0.8);
        		}
    		}
    		.exportbtn{
    			height: 0.36rem;
				width:1.76rem;  				
				line-height: 0.36rem;			
				text-align: center;	
				font-size: 0.16rem;
				background-image: url(../../assets/img/education_manage/export.png);
				background-size:0.18rem 0.18rem;
				background-repeat: no-repeat;
				background-position: 0.35rem center;
	            color: #FFFFFF;
	            border-radius: 0.08rem;
	            cursor: pointer;
	            display: inline-block;
	            background-color: #3885F8;
	            &:hover{
            		background-color: rgba(56, 133, 248, 0.8);
        		}
    		}
    		.bottomPager{
			    	width:100%;
			    	height: auto;
			    	padding-top:0.3rem;
			}
		}
		
		.class_time_total_detail{
			
		   
		    .header{
		    	margin: 0.14rem auto;
		    	min-width: 15.48rem;
		    	width: 15.48rem;
		    	/*padding: 0.2rem 0.32rem 0.2rem 0.32rem;*/
			    height: auto;
			    background: #fff;
			    border: 0.01rem solid #ededed;
			    border-radius: 0.1rem;
			    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
			    .top{
			    	height: 0.5rem;
			    	width:100%;
			    	line-height: 0.5rem;
			    	text-align: left;
   					padding: 0rem 0.3rem;
   					border-bottom:1px solid #f3f6fc;
   					background-image:url(../../assets/img/common/person_icon.png);
   					background-size:0.3rem 0.3rem;
   					background-repeat:no-repeat;
   					background-position:0.3rem 0.1rem;
   					text-indent: 0.35rem;
			    	.name{
			    		font-size: 0.24rem;	
			    		color: #3885F9;	 
			    		font-weight: bold;   		
			    	}
			    	.phone{
			    		font-size:0.18rem;
			    		color: #333333;
			    	}
			    	.back{
			    		float:right;
			    		font-size:0.16rem;
			    		cursor:pointer;
			    		color:#3296FA;
			    	}
			    }
			    .detail_info{
			    	padding: 0.3rem 0.3rem;
			    	font-size: 0.14rem;
			    }
			}
			.bodyer{
				margin: 0.14rem auto;
		    	min-width: 15.48rem;
		    	width: 15.48rem;
		    	/*padding: 0.2rem 0.32rem 0.2rem 0.32rem;*/
			    height: auto;
			    background: #fff;
			    border: 0.01rem solid #ededed;
			    border-radius: 0.1rem;
			    box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
				.search_info{
					height: 0.6rem;
			    	width:100%;
			    	line-height: 0.6rem;
			    	text-align: left;
   					padding: 0rem 0.3rem;
   					border-bottom:1px solid #f3f6fc;
			    	.el-input__inner{
				        border-radius: 0.08rem;
				        font-size: 0.16rem;
				        color: #666666;
				        height: 0.36rem !important;
				        line-height: 0.36rem;
	    			}
		    	}
			    .teacher_list{
			    	padding: 0.3rem 0.3rem;
			    }
			    .bottomPager{
			    	width:100%;
			    	height: auto;
			    	padding:0rem 0.3rem 0.3rem 0.3rem;
			    }
			    
			}
		    
		}
		
	}
	
</style>